<div class="site-info">
    <ol>
        <li>色彩应与产品定位相匹配，且符合用户心理认知；</li>
        <li>视觉层次应清晰分明，为重要行动点或关键信息定义一个主色，并建立视觉连续性；</li>
    </ol>
    <p>背景色</p>
    <div class="site-mask-white bg-default">背景色</div>
    <p>功能颜色</p>
    <div class="site-mask-white text-primary">主题色</div>
    <div class="site-mask-white bg-primary">主题背景色</div>
    <div class="site-mask-white text-info">消息色</div>
    <div class="site-mask-white bg-info">消息背景色</div>
    <div class="site-mask-white text-success">成功色</div>
    <div class="site-mask-white bg-success">成功背景色</div>
    <div class="site-mask-white text-warning">警告色</div>
    <div class="site-mask-white bg-warning">警告背景色</div>
    <div class="site-mask-white text-danger">失败色</div>
    <div class="site-mask-white bg-danger">失败背景色</div>
    <p>链接颜色</p>
    <div class="site-mask-white site-link">链接色</div>
    <div class="site-mask-white site-link-hover">链接hover色</div>
    <div class="site-mask-white site-link-active">链接click色</div>
    <p>标题和文本颜色</p>
    <div class="site-mask-white site-text-title">标题色</div>
    <div class="site-mask-white site-text">文本色</div>
    <div class="site-mask-white site-text-secondary">次文本色</div>
    <div class="site-mask-white" style="color: #bfbfbf;">禁用</div>
    <p>其他</p>
    <div class="site-mask-white site-border">边框色</div>
    <div class="site-mask-white bg-primary site-border-radius">圆角</div>
    <div class="site-mask-white bg-primary site-box-shadow">阴影</div>
</div>